<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="flat-input">
  <template>
    <style>
      flat-input {
        display: inline-block;
        font-size: 1rem;
        margin: 10px 0;
        width: 100%;
      }

      flat-input>input::-webkit-input-placeholder {
        color: transparent;
      }

      flat-input>input::-moz-placeholder {
        color: transparent;
      }

      flat-input>input:-ms-input-placeholder {
        color: transparent;
      }

      flat-input>input::-ms-input-placeholder {
        color: transparent;
      }

      flat-input>input {
        font-size: 1rem;
        font-weight: 400;
        color: var(--app-primary-color);
        border: none;
        padding: 8px 0;
        width: 100%;
        outline: none;
      }

      flat-input>input:invalid {
        /* reset the default style in FF */
        box-shadow: none;
      }

      flat-input>span.flat-md-decorator {
        display: block;
        height: 1px;
        width: 100%;
        margin: auto;
        border-top: 1px solid rgba(0, 0, 0, .10);
        position: relative;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }

      flat-input span.flat-underline {
        display: block;
        height: 2px;
        width: 100%;
        margin: auto;
        background-color: var(--app-primary-color);
        position: absolute;
        top: -1px;
        left: 0;
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
        transition: -webkit-transform 0.15s ease-in;
        transition: transform 0.15s ease-in;
      }
      /* input label */

      flat-input>span.flat-md-decorator>label {
        display: block;
        pointer-events: none;
        opacity: 0.5;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-duration: 0.15s;
        transition-timing-function: ease-out;
        will-change: transform;
        -webkit-transform: translate3d(0px, -1.9em, 0px);
        transform: translate3d(0px, -1.9em, 0px);
      }
      /* Error message */

      flat-input>span.flat-md-decorator::after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 0.65rem;
        color: #e53935;
        content: attr(error-message);
        display: none;
        white-space: nowrap;
        margin-top: 5px;
      }

      flat-input>input:focus+span.flat-md-decorator>span.flat-underline {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        transition: -webkit-transform 0.15s ease-out;
        transition: transform 0.15s ease-out;
      }
      /* Label: valid state */

      flat-input>input:focus+span.flat-md-decorator>label {
        -webkit-transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        opacity: 1;
      }

      flat-input>input:optional:not(:placeholder-shown)+span.flat-md-decorator>label {
        -webkit-transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        opacity: 1;
      }

      _:-ms-lang(x),
      flat-input>input+span.flat-md-decorator>label {
        -webkit-transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        opacity: 1;
      }

      flat-input>input:optional:-moz-ui-valid+span.flat-md-decorator>label {
        -webkit-transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        opacity: 1;
      }
      /* Underline */

      flat-input>input:not(:focus):not(:placeholder-shown):invalid+span.flat-md-decorator>span.flat-underline {
        background-color: #e53935;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        transition: -webkit-transform 0.15s ease-out;
        transition: transform 0.15s ease-out;
      }

      flat-input>input:not(:focus):-moz-ui-invalid:invalid+span.flat-md-decorator>span.flat-underline {
        background-color: #e53935;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        transition: -webkit-transform 0.15s ease-out;
        transition: transform 0.15s ease-out;
      }

      flat-input>input[aria-invalid='true']:not(:valid)+span.flat-md-decorator>span.flat-underline {
        background-color: #e53935;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        transition: -webkit-transform 0.15s ease-out;
        transition: transform 0.15s ease-out;
      }
      /* Error message */

      flat-input>input:not(:focus):not(:placeholder-shown):invalid+span.flat-md-decorator::after {
        display: block;
      }

      flat-input>input:not(:focus):-moz-ui-invalid:invalid+span.flat-md-decorator::after {
        display: block;
      }

      flat-input>input[aria-invalid='true']:not(:valid)+span.flat-md-decorator::after {
        display: block;
      }
      /* Error label */

      flat-input>input:not(:focus):not(:placeholder-shown):invalid+span.flat-md-decorator>label {
        -webkit-transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        opacity: 1;
        color: #e53935;
      }

      flat-input>input:not(:focus):-moz-ui-invalid:invalid+span.flat-md-decorator>label {
        -webkit-transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        opacity: 1;
        color: #e53935;
      }

      flat-input>input[aria-invalid='true']:not(:valid)+span.flat-md-decorator>label {
        -webkit-transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        opacity: 1;
        color: #e53935;
      }
      /* Valid label */

      flat-input>input:not(:focus):required:valid+span.flat-md-decorator>label {
        -webkit-transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        transform: translate3d(0px, -3.4em, 0px) scale(0.8, 0.8);
        opacity: 1;
      }
    </style>
    <slot></slot>
  </template>
  <script>
    /**
     * `flat-input` Description
     *
     * @summary Input of FlatElements
     * @customElement
     * @polymer
     * @extends Polymer.Element
     */
    class FlatInput extends Polymer.Element {
      static get is() {
        return 'flat-input';
      }
    }
    window.customElements.define(FlatInput.is, FlatInput);
  </script>
</dom-module>